<template>
  <div>
    <div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        :router="true"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-submenu index="1">
          <template
            slot="title"
            class="select-title"
            :popper-append-to-body="true"
            >作业管理</template
          >
          <el-submenu>
            <template slot="title">查看作业</template>
            <el-menu-item index="/checkhomework">已完成</el-menu-item>
            <el-menu-item index="/nohomework">未完成</el-menu-item>
          </el-submenu>
          <el-menu-item index="/askandanswer">问答</el-menu-item>
          <el-menu-item index="/studentpractice">考试</el-menu-item>
        </el-submenu>
        <el-menu-item index="/onlinelearn">在线学习</el-menu-item>
        <el-menu-item index="/studentmanagement">加入班级</el-menu-item>
        <el-menu-item index="/applicanthistory">申请记录</el-menu-item>
        <el-menu-item index="/practicedetail">考试记录</el-menu-item>
        <el-menu-item index="/essentiainfo">基本信息</el-menu-item>
        <div class="cn">
          <div class="blockl">
            <el-submenu index="2">
              <template slot="title">
                <div class="demo-fit">
                  <div class="block">
                    <p>
                      <el-avatar
                        shape="circle"
                        :size="50"
                        :fit="fit"
                        :src="url"
                      ></el-avatar>
                    </p>
                  </div>
                </div>
              </template>
              <el-menu-item @click="change()">修改密码</el-menu-item>
              <el-menu-item index="/checkhomework" @click="logout()"
                >退出</el-menu-item
              >
            </el-submenu>
          </div>
        </div>
      </el-menu>
    </div>

    <div>
      <el-dialog
        title="修改密码"
        :visible.sync="dialogFormVisible"
        width="30%"
        :before-close="handleClose"
      >
        原密码：
        <el-input
          placeholder="请输入密码"
          v-model="changePassword.password"
          show-password
        ></el-input>
        <p>
          新密码：
          <el-input
            placeholder="请输入密码"
            v-model="changePassword.newPassword"
            show-password
          ></el-input>
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit(changePassword)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { password } from "../../../../api/personal.js";

export default {
  name: "Header",
  data() {
    return {
      changePassword: {
        password: "",
        newPassword: "",
        id: "",
      },
      dialogFormVisible: false,
      info: {
        password: "",
        newPassword: "",
        id: "",
      },
      drawer: false,
      url: "https://tse1-mm.cn.bing.net/th/id/OIP-C.LPkZoSEESYPk5u7Ly9f3RAHaHZ?w=142&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
    };
  },
  created() {
    this.changePassword.id = Cookies.get("userId");
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    change() {
      this.dialogFormVisible = true;
    },

    submit(da) {
      password(da).then((resp) => {
        if (resp.data.code == 200) {
          this.$message({
            message: "恭喜你，密码修改成功 ",
            type: "success",
          });
          this.dialogFormVisible = false;
          this.studentquery(this.page);
        } else {
          this.$message.error("原密码错误");
        }
      });
    },
    logout() {
      Cookies.remove("userId");
      Cookies.remove("classId");
      Cookies.remove("roleId");
      this.$router.push("/login");
      this.$message({
        message: "恭喜你，退出成功",
        type: "success",
      });
    },
  },
};
</script>

<style lang="less" scoped>
h1 {
  /* position: absolute; */
  margin-left: 40%;
}
.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 60px;
  line-height: 60px;
  border-bottom: 2px solid transparent;
  color: white;
  font-size: 20px;
}
.blockl {
  position: absolute;
  right: 0px;
  margin-top: -13px;
}

.el-menu {
  border-right: solid 1px #e6e6e6;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 100;
  background-color: #babae4;
}
.el-menu--horizontal > .el-menu-item[data-v-15228138] {
  float: left;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #ffffff;
  background-color: #babae4;
  font-size: 20px;
}
.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 60px;
  line-height: 60px;
  border-bottom: 2px solid transparent;
  color: #ffffff;
  font-size: 20px;
}
.cn {
  display: flex;
  justify-content: space-between;
}

.title {
  line-height: 100%;
}
.el-menu {
  &.el-menu--horizontal {
    width: 1535px;
    margin-left: -20px;
    position: fixed;
    z-index: 999;
  }
}
.el-submenu__title {
  color: white;
}
</style>
